@extends('layouts.admin.header')
@section('cnt')
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            @csrf
            <div class="layui-form-item">
                <label class="layui-form-label">角色名称</label>
                <div class="layui-input-block">
                    <input class="layui-input" type="text" name="name" placeholder="请输入角色名称" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">选择权限</label>
                <div class="layui-input-block">
                    <div id="LAY-auth-tree-index"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" type="submit" lay-submit lay-filter="LAY-auth-tree-submit">提交</button>
                    <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection
@section('js')
<script>
    layui.config({
        base: 'http://channel001.oss-cn-qingdao.aliyuncs.com/layuiadmin/lib/extend/layui-authtree/layui_exts/',
    }).extend({
        authtree: 'authtree',
    });
    layui.use(['jquery', 'authtree', 'form', 'layer'], function(){
        var $ = layui.jquery;
        var authtree = layui.authtree;
        var form = layui.form;
        var layer = layui.layer;
        var id = 0;
        // 初始化
        $.ajax({
            url: '/admin/getmenulist/'+id,
            dataType: 'json',
            success: function(data){
                var trees = authtree.listConvert(data.data.list, {
                    primaryKey: 'id'
                    ,startPid: 0
                    ,parentKey: 'pid'
                    ,nameKey: 'name'
                    ,valueKey: 'id'
                    ,checkedKey: data.data.checkedId
                });
                // 渲染时传入渲染目标ID，树形结构数据（具体结构看样例，checked表示默认选中），以及input表单的名字
                authtree.render('#LAY-auth-tree-index', trees, {
                    inputname: 'authids[]',
                    layfilter: 'lay-check-auth',
                    // openall: true,
                    autowidth: true,
                });

                // PS:使用 form.on() 会引起了事件冒泡延迟的BUG，需要 setTimeout()，并且无法监听全选/全不选
                // form.on('checkbox(lay-check-auth)', function(data){
                //     // 注意这里：需要等待事件冒泡完成，不然获取叶子节点不准确。
                //     setTimeout(function(){
                //         console.log('监听 form 触发事件数据', data);
                //         // 获取选中的叶子节点
                //         var leaf = authtree.getLeaf('#LAY-auth-tree-index');
                //         console.log('leaf', leaf);
                //         // 获取最新选中
                //         var lastChecked = authtree.getLastChecked('#LAY-auth-tree-index');
                //         console.log('lastChecked', lastChecked);
                //         // 获取最新取消
                //         var lastNotChecked = authtree.getLastNotChecked('#LAY-auth-tree-index');
                //         console.log('lastNotChecked', lastNotChecked);
                //     }, 100);
                // });
                // // 使用 authtree.on() 不会有冒泡延迟
                // authtree.on('change(lay-check-auth)', function(data) {
                //     console.log('监听 authtree 触发事件数据', data);
                //     // 获取所有节点
                //     var all = authtree.getAll('#LAY-auth-tree-index');
                //     console.log('all', all);
                //     // 获取所有已选中节点
                //     var checked = authtree.getChecked('#LAY-auth-tree-index');
                //     console.log('checked', checked);
                //     // 获取所有未选中节点
                //     var notchecked = authtree.getNotChecked('#LAY-auth-tree-index');
                //     console.log('notchecked', notchecked);
                //     // 获取选中的叶子节点
                //     var leaf = authtree.getLeaf('#LAY-auth-tree-index');
                //     console.log('leaf', leaf);
                //     // 获取最新选中
                //     var lastChecked = authtree.getLastChecked('#LAY-auth-tree-index');
                //     console.log('lastChecked', lastChecked);
                //     // 获取最新取消
                //     var lastNotChecked = authtree.getLastNotChecked('#LAY-auth-tree-index');
                //     console.log('lastNotChecked', lastNotChecked);
                // });
                // authtree.on('deptChange(lay-check-auth)', function(data) {
                //     console.log('监听到显示层数改变',data);
                // });
            }
        });
        form.on('submit(LAY-auth-tree-submit)', function(obj){
            // var authids = authtree.getAll('#LAY-auth-tree-index');
            // console.log('Choosed authids is', authids);
                // 获取所有已选中节点
            var authids = authtree.getChecked('#LAY-auth-tree-index');
            console.log(authids);
            //获取角色名称
            var name = $('.layui-input').val();
            console.log(name);
            // console.log('checked', authids);
            obj.field.authids = authids;
            obj.field.name = name;
            $.ajax({
                type:'post',
                url: '/admin/adminrole',
                data: obj.field,
                success: function(res){
                    if(res==1){
                        layer.alert("增加成功", {
                            icon: 6
                        } ,function() {
                            //关闭当前frame
                            xadmin.close();
                            // 可以对父窗口进行刷新
                            xadmin.father_reload();
                        });
                    }else{
                        layer.alert("增加失败", {
                            icon: 5
                        } ,function() {
                            //关闭当前frame
                            xadmin.close();
                            // 可以对父窗口进行刷新
                            xadmin.father_reload();
                        });
                    }

                }
            });
            return false;
        });
    });
    </script>
@endsection